<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./js/commons/typed-2.0.12.min.js"></script>
    <script src="./js/commons/vue-2.7.13.min.js"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.13/vue.js"></script>-->
    <script src="./js/commons/anime-3.2.2.min.js"></script>
    <link rel="stylesheet" href="./css/index.css" type="text/css" />
    <link rel="stylesheet" href="./css/graphical-1.css" type="text/css" />
    <link rel="stylesheet" href="./css/graphical-2.css" type="text/css" />
    <link rel="stylesheet" href="./css/left-view.css" type="text/css" />
    <link rel="stylesheet" href="./css/right-view.css" type="text/css" />
    <!-- 自定义组件 -->
    <script src="./js/components/content-graphical.js"></script>
    <script src="./js/components/title-graphical.js"></script>
    <script src="./js/components/switch.js"></script>
    <title>程序员小杨的个人简历</title>
</head>
<body>
    <div id="rootView">
        <div :class="!isFixed ? 'empty-left-view left-view-style' : 'empty-left-view'">
            <div :class="isFixed ? 'left-view-fixed left-view-style' : ''">
                <div class="avatar-view">
                    <div class="avatar-background turn-right">
                        <img src="./assect/avatar.jpg" class="avatar turn-left"/>
                    </div>
                </div>
                <div>
                    <div class="title-view">
                        <div class="title">
                            程序员小杨
                        </div>
                        <div class="sub-title"><span></span></div>
                    </div>
                    <div class="order-info-view">
                        <div class="order-info-column">
                            <div class="order-info-column-name">学历：</div>
                            <div>大专</div>
                        </div>
                        <div class="order-info-column">
                            <div class="order-info-column-name">年龄：</div>
                            <div>24</div>
                        </div>
                        <div class="order-info-column">
                            <div class="order-info-column-name">工作经验：</div>
                            <div>3年</div>
                        </div>
                        <div class="order-info-column">
                            <div class="order-info-column-name">邮箱：</div>
                            <div>datom7606@163.com</div>
                        </div>
                        <div class="order-info-column">
                            <div class="order-info-column-name">Gitee：</div>
                            <div><a href="https://gitee.com/i7606" target="_blank">@信仰</a></div>
                        </div>
                        <div class="order-info-column">
                            <div class="order-info-column-name">当前状态：</div>
                            <div><b>在职-考虑机会</b></div>
                        </div>
                    </div>
                </div>
                <div class="button-view">
                    <div class="button-view-title">固定卡片</div>
                    <switch-button @checked="targetPosition" :fixed="isFixed"></switch-button>
                </div>
            </div>
        </div>
        <div class="right-view">
            <div class="y-line"></div>
            <title-graphical></title-graphical>
            <content-graphical title="主要技术" :content="skill"></content-graphical>
            <content-graphical title="工作经历" :content="workExperience"></content-graphical>
            <content-graphical title="项目经验" :content="projectExperience"></content-graphical>
            <content-graphical title="个人项目" :content="personalProject"></content-graphical>
<!--            <content-graphical title="自我评价"></content-graphical>-->
        </div>
    </div>
</body>
<script src="js/index.js"></script>
</html>